<template>
<fullscreen ref="fullscreen" @change="fullscreenChange">
  <el-container class="page-container">
    <!-- 头部 -->
    <el-header class="page-header">
      <div class="logo">
        <img src="@/assets/logo.png"
             alt="">
        <span>黑马商城</span>
      </div>
      <div class="rt-menut">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" v-if="!fullscreen" >
            <el-dropdown-item>
              <div @click="$refs['fullscreen'].toggle() ">全屏</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="quit">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px':'230px' "
                class="page-aside">
        <div class="line-row">
          <i @click="isCollapse=!isCollapse"
             class="el-icon-s-unfold"
             v-if="isCollapse"></i>
          <i @click="isCollapse=!isCollapse"
             class="el-icon-s-fold"
             v-else></i>
        </div>
        <!-- 菜单内容 -->
        <!-- router属性表示开启路由模式，将把index的内容作为跳转地址 -->
        <el-menu :default-active="$route.path"
                router
                background-color="#545c64"
                unique-opened
                :collapse="isCollapse"
                :collapse-transition="false"
                text-color="#fff"
                class="el-menu-vertical-demo">
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="['iconfont', menuIcon[item.id] ]"></i>
              <span>{{item.authName}}</span>
            </template>
           <el-menu-item :index="'/'+val.path" v-for="val in item.children" :key="val.id">
             <!-- <router-link :to="'/'+val.path">{{val.authName}}</router-link> -->
             {{val.authName}}
           </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 内容区 -->
      <el-main class="page-main">
        <!-- 标签页 -->
        <TagsView/>
        <!-- 二级路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</fullscreen>
</template>

<script>
import { getStorage } from '@/utils'
import TagsView from '@/components/TagsView'
export default {
  components: {
    TagsView
  },
  name: 'Layout',
  data () {
    // const user = JSON.parse(localStorage.getItem('HEIMASHOP_USER'))
    const user = getStorage('HEIMASHOP_USER')
    return {
      user,
      isCollapse: false, // 是否合起来
      menuList: [], // 菜单的数据
      menuIcon: { // 字体图标数据
        125: 'icon-user',
        103: 'icon-tijikongjian',
        101: 'icon-shangpin',
        102: 'icon-danju',
        145: 'icon-baobiao'
      },
      fullscreen: false // 是否全屏了
    }
  },
  created () {
    this.loadMenuList()
  },
  methods: {
    // 退出功能
    quit () {
      localStorage.removeItem('HEIMASHOP_USER')
      this.$router.push('/login')
    },
    // 获取菜单数据
    async loadMenuList () {
      // 请求
      const { data: res } = await this.$axios.get('/menus')
      // 错误处理
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 成功赋值
      this.menuList = res.data
    },
    // 全屏切换了
    fullscreenChange (fullscreen) {
      console.log(111111111)
      this.fullscreen = fullscreen
    }
  }
}
</script>

<style lang="less">
.page-container{
   width: 100vw;
   height: 100vh;
}
.page-header{
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  .logo{
    display: flex;
    align-items: center;
    img{
      height: 50px;
    }
    span{
       line-height: 50px;
       font-size: 24px;
       margin-left: 10px;
    }
  }
  .el-dropdown{
    color: #fff;
    cursor: pointer;
  }
}
.page-aside{
  .el-menu{
    border-right: none;
  }
  background-color: #545c64;
  .line-row{
    background-color: #6a6d79;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    i{
      cursor: pointer;
    }
  }
  .iconfont{
    margin-right: 3px;
    color: #fff;
  }
}
.page-main{
  background-color: #fafafa;
  height: calc(100vh - 60px);
  overflow-y: scroll!important;
  position: relative;
  box-sizing: border-box;
  padding-top: 50px!important;
}
</style>
